<template>
    <div class="sem">
        <header>
            <span></span>
            <h2>SEO、SEM优化案例</h2>
        </header>
        <div class="image">
            <img src="../../../assets/img/sem.png" alt="">
        </div>
        <div class="key-word">
            <div class="subtitle">
                <span></span>
                <strong>关键词</strong>
            </div>
            <p>花千骨、花千骨游戏</p>
        </div>
        <div class="time">
            <div class="subtitle">
                <span></span>
                <strong>时间</strong>
            </div>
            <p>2016.6 - 2016.7</p>
        </div>
        <div class="strategy">
            <div class="subtitle">
                <span></span>
                <strong>策略</strong>
            </div>
            <p>百度 SEO 优化，主要包括内容站 SEO 数据分析、百度指数优化、外网发帖、微博话题等</p>
        </div>
        <div class="optimization-effect">
            <div class="subtitle">
                <span></span>
                <strong>优化效果</strong>
            </div>
            <p>优化后官网在搜索结果排名前三，百度指数上涨 70%， 并维持 3 个月时间</p>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Sem',
    data () {
        return {

        }
    }
}
</script>
<style scoped>
.sem {
    margin-top: 100px;
}
.sem header {
    text-align: center;
}
.sem header span {
    display: inline-block;
    width: 55px;
    height: 39px;
    background: url("../../../assets/img/down.png") no-repeat;
    background-size: cover;
}
.sem header h2 {
    font-size: 48px; /*px*/
    color: #1e90ff;
    margin-top: 20px;
}
.sem .image {
    display: flex;
    height: 400px;
    margin: 80px auto 0;
}
.sem .image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: inline-block;
}
.sem .key-word,.sem .time,.sem .strategy,.sem .optimization-effect {
    width: 670px;
    margin: 0 auto;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
}
.sem .key-word .subtitle,.sem .time .subtitle,.sem .strategy .subtitle,.sem .optimization-effect .subtitle {
    display: flex;
}
.sem .key-word .subtitle span,.sem .time .subtitle span,.sem .strategy .subtitle span,.sem .optimization-effect .subtitle span {
    width: 6px;
    height: 30px;
    display: inline-block;
    background-color: #1e90ff;
}
.sem .key-word .subtitle strong,.sem .time .subtitle strong,.sem .strategy .subtitle strong,.sem .optimization-effect .subtitle strong {
    font-size: 36px; /*px*/
    color: #05173b;
    margin-left: 12px;
}
.sem .key-word p,.sem .time p,.sem .strategy p,.sem .optimization-effect p {
    font-size: 30px; /*px*/
    color: #708090;
    margin-top: 40px;
    margin-left: 18px;
    line-height: 40px;
    display: inline-block;
}
</style>
